import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
    Box,
    Button,
    Card,
    CardContent,
    Container,
    Grid,
    Paper,
    Typography,
    Stack,
    Avatar,
} from '@mui/material';
import DescriptionIcon from '@mui/icons-material/Description';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import ShareIcon from '@mui/icons-material/Share';
import PeopleIcon from '@mui/icons-material/People';
import heroImage from '../assets/hero-image.jpg';

const Home = () => {
    // Features section data
    const features = [
        {
            icon: <DescriptionIcon fontSize="large" color="primary" />,
            title: '专业简历模板',
            description: '多种精美模板，满足不同行业需求，让您的简历脱颖而出。',
        },
        {
            icon: <CloudUploadIcon fontSize="large" color="primary" />,
            title: '简单易用的编辑器',
            description: '直观的拖拽界面，轻松创建和编辑您的专业简历。',
        },
        {
            icon: <ShareIcon fontSize="large" color="primary" />,
            title: '一键分享',
            description: '生成专属链接或二维码，轻松分享您的简历给招聘方。',
        },
        {
            icon: <PeopleIcon fontSize="large" color="primary" />,
            title: '求职者社区',
            description: '与其他求职者交流经验，获取行业洞察和职业建议。',
        },
    ];

    // Testimonials data
    const testimonials = [
        {
            name: '李明',
            position: '软件工程师',
            avatar: 'https://i.pravatar.cc/150?img=3',
            text: '使用这个平台后，我收到的面试邀请增加了3倍！简历模板非常专业，编辑器也很容易上手。',
        },
        {
            name: '王芳',
            position: '市场营销经理',
            avatar: 'https://i.pravatar.cc/150?img=5',
            text: '作为一名营销人员，我需要一份能展示我创意能力的简历。这个平台提供的模板正好满足了我的需求。',
        },
        {
            name: '张伟',
            position: '应届毕业生',
            avatar: 'https://i.pravatar.cc/150?img=8',
            text: '刚毕业时对制作简历一头雾水，这个平台给了我很大帮助。现在已经成功入职我理想的公司！',
        },
    ];

    return (
        <Box>
            {/* Hero Section */}
            <Paper
                sx={{
                    position: 'relative',
                    backgroundColor: 'grey.800',
                    color: '#fff',
                    mb: 4,
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center',
                    backgroundImage: `url(${heroImage})`,
                    height: '500px',
                }}
            >
                {/* Increase the priority of the hero background image */}
                <Box
                    sx={{
                        position: 'absolute',
                        top: 0,
                        bottom: 0,
                        right: 0,
                        left: 0,
                        backgroundColor: 'rgba(0,0,0,.5)',
                    }}
                />
                <Grid container>
                    <Grid item md={6}>
                        <Box
                            sx={{
                                position: 'relative',
                                p: { xs: 3, md: 6 },
                                pr: { md: 0 },
                                height: '500px',
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                            }}
                        >
                            <Typography component="h1" variant="h3" color="inherit" gutterBottom>
                                打造专业简历，展示最好的自己
                            </Typography>
                            <Typography variant="h5" color="inherit" paragraph>
                                使用我们的简历分享平台，轻松创建、编辑和分享您的专业简历，让招聘官一眼看中您。
                            </Typography>
                            <Stack direction="row" spacing={2} sx={{ mt: 4 }}>
                                <Button
                                    variant="contained"
                                    size="large"
                                    component={RouterLink}
                                    to="/register"
                                >
                                    免费注册
                                </Button>
                                <Button
                                    variant="outlined"
                                    size="large"
                                    color="inherit"
                                    component={RouterLink}
                                    to="/templates"
                                >
                                    浏览模板
                                </Button>
                            </Stack>
                        </Box>
                    </Grid>
                </Grid>
            </Paper>

            {/* Features Section */}
            <Container sx={{ py: 8 }} maxWidth="lg">
                <Typography variant="h4" align="center" gutterBottom>
                    为什么选择我们
                </Typography>
                <Typography variant="subtitle1" align="center" color="text.secondary" paragraph sx={{ mb: 6 }}>
                    我们提供全方位的简历创建和分享解决方案，帮助您在求职过程中脱颖而出
                </Typography>
                <Grid container spacing={4}>
                    {features.map((feature, index) => (
                        <Grid item key={index} xs={12} sm={6} md={3}>
                            <Card
                                sx={{
                                    height: '100%',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    textAlign: 'center',
                                    p: 2,
                                }}
                            >
                                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
                                    {feature.icon}
                                </Box>
                                <CardContent sx={{ flexGrow: 1 }}>
                                    <Typography gutterBottom variant="h5" component="h2">
                                        {feature.title}
                                    </Typography>
                                    <Typography>{feature.description}</Typography>
                                </CardContent>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
            </Container>

            {/* Testimonials Section */}
            <Box sx={{ bgcolor: 'background.paper', py: 8 }}>
                <Container maxWidth="lg">
                    <Typography variant="h4" align="center" gutterBottom>
                        用户反馈
                    </Typography>
                    <Typography variant="subtitle1" align="center" color="text.secondary" paragraph sx={{ mb: 6 }}>
                        听听我们的用户怎么说
                    </Typography>
                    <Grid container spacing={4}>
                        {testimonials.map((testimonial, index) => (
                            <Grid item key={index} xs={12} md={4}>
                                <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                                    <CardContent sx={{ flexGrow: 1 }}>
                                        <Typography variant="body1" paragraph sx={{ mb: 2, fontStyle: 'italic' }}>
                                            "{testimonial.text}"
                                        </Typography>
                                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                                            <Avatar src={testimonial.avatar} sx={{ mr: 2 }} />
                                            <Box>
                                                <Typography variant="subtitle1">{testimonial.name}</Typography>
                                                <Typography variant="body2" color="text.secondary">
                                                    {testimonial.position}
                                                </Typography>
                                            </Box>
                                        </Box>
                                    </CardContent>
                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                </Container>
            </Box>

            {/* CTA Section */}
            <Container sx={{ py: 8 }} maxWidth="md">
                <Box
                    sx={{
                        bgcolor: 'primary.main',
                        color: 'white',
                        p: 6,
                        borderRadius: 2,
                        textAlign: 'center',
                    }}
                >
                    <Typography variant="h4" gutterBottom>
                        准备好开始了吗？
                    </Typography>
                    <Typography variant="subtitle1" paragraph sx={{ mb: 4 }}>
                        立即注册，创建您的专业简历，开启成功求职之旅
                    </Typography>
                    <Button
                        variant="contained"
                        color="secondary"
                        size="large"
                        component={RouterLink}
                        to="/register"
                        sx={{ px: 4, py: 1 }}
                    >
                        免费注册
                    </Button>
                </Box>
            </Container>
        </Box>
    );
};

export default Home; 